<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<!-- v-model 多选 -->

<body>
    <div id="app">
        <div>
            <h3>勾选一个</h3>
            <div>
                <label for=""><input type="checkbox" v-model="isAgree"> 同意协议 </label>
            </div>
            <h5> 是否同意协议： {{isAgree? '同意' : '不同意'}}</h5>
            <button :disabled="!isAgree">注册</button>
        </div>
        
        <div>
            <h3>勾选多个</h3>
            <div>
                <label for="">兴趣爱好：</label>
                <input type="checkbox" name="hobby" value="篮球" v-model="hobbies"/> 篮球
                <input type="checkbox" name="hobby" value="足球" v-model="hobbies"/> 足球
                <input type="checkbox" name="hobby" value="羽毛球" v-model="hobbies"/> 羽毛球
                <input type="checkbox" name="hobby" value="游泳" v-model="hobbies"/> 游泳
                <input type="checkbox" name="hobby" value="健身" v-model="hobbies"/> 健身
                <input type="checkbox" name="hobby" value="跑步" v-model="hobbies"/> 跑步
                <input type="checkbox" name="hobby" value="排球" v-model="hobbies"/> 排球
            </div>
            <div>
                <ul>
                    <li v-for=" h in hobbies">{{h}}</li>
                </ul>
            </div>

            <p>============================</p>

            <h3>值绑定</h3>
            <label v-for="star in stars" :for="star" >
                <input :id="star" :value="star" type="checkbox" v-model="likes"> {{star}}
            </label>
            <div>
                <ul>
                    <li v-for=" l in likes">{{l}}</li>
                </ul>
            </div>
        </div>
    </div>
    <script src="js/vue.js"></script>

    <script>
        const HelloVue = {
            data() {
                return {
                   isAgree: true,
                   hobbies:[],
                   stars:['刘德华', '张毅', '乔丹', '科比'],
                   likes:[]
                }
            },
            computed: {
            },
            methods: {
            }
        };

        const app = Vue.createApp(HelloVue).mount("#app");
    </script>
</body>

</html>